<template>
	<view class="v-tabs-page">
		<v-tabs
			v-model:value="activeIndex"
			:tabs="items"
			:activeColor="activeColor"
			:inactiveColor="inactiveColor"
			@change="onTabChange"
			:is-line="isLine"
			:line-height="lineHeight"
			:line-width="lineWidth"
			:line-offset="lineOffset"
			:min-tab-width="minTabWidth"
			:item-padding="itemPadding"
			:hover-class="hoverClass"
		/>

		<v-carousel v-model:current="activeIndex" :items="items" :indicator-dots="false" :autoplay="false" :isEndsButton="false" :box-height="boxHeight" @change="onCarouselChange">
			<template v-for="(item, index) in items" #[`item-${index}`]>
				<slot :name="`content-${index}`" :item="item" :index="index">
					<view class="default-content">
						<v-loading text="加载中..." :show="true" />
					</view>
				</slot>
			</template>
		</v-carousel>
	</view>
</template>

<script lang="ts" setup>
import { ref, watch, inject } from 'vue';

interface ContentList {
	title: string;
	content?: any;
	key?: string;
}

/**
 * v-tabs-page 标签页
 * items	标签标题
 * value	目前显示标签页内容
 * activeColor	标签标题高亮颜色
 * inactiveColor	标签标题颜色
 * isLine	是否显示下划线
 */
const props = defineProps({
	items: {
		type: Array as () => ContentList[],
		required: true,
		default: () => []
	},
	value: {
		type: Number,
		default: 0
	},
	activeColor: {
		type: String,
		default: '#287afa'
	},
	inactiveColor: {
		type: String,
		default: '#666'
	},
	isLine: {
		type: Boolean,
		default: true
	},
	lineHeight: {
		type: String,
		default: '5'
	},
	lineWidth: {
		type: Number,
		default: 0
	},
	lineOffset: {
		type: Number,
		default: 8
	},
	minTabWidth: {
		type: Number,
		default: 120
	},
	itemPadding: {
		type: Number,
		default: 32
	},
	hoverClass: {
		type: String,
		default: 'tabs-hover'
	},
	boxHeight: {
		type: String,
		default: '400rpx'
	}
});

const emit = defineEmits(['update:value', 'change']);
const config = inject<any>('config');
const activeIndex = ref(props.value);

watch(
	() => props.value,
	(val) => {
		activeIndex.value = val;
		emit('update:value', val);
	},
	{ immediate: true }
);

const onTabChange = (index: number) => {
	activeIndex.value = index;
	emit('update:value', index);
	emit('change', index);
};
const onCarouselChange = (index: number) => {
	activeIndex.value = index;
	emit('update:value', index);
	emit('change', index);
};
</script>

<style lang="scss" scoped>
.v-tabs-page {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.default-content {
	width: 100%;
	padding: 20rpx;
	font-size: v-bind('config.fontSize.mediumText');
	color: v-bind('config.fontColor.mainText');
	min-height: 400rpx;
}
</style>
